<template>
  <div class="progress-bar" ref="progressBar" @click="progressClick">
    <div class="bar-inner">
      <div class="progress" ref="progress"></div>
      <div class="progress-btn-wrapper" ref="progressBtn"
          @touchstart.prevent="progressTouchStart"
          @touchmove.prevent="progressTouchMove"
          @touchend="progressTouchEnd"
      >
        <div class="progress-btn"></div>
      </div>

    </div>

  </div>
</template>

<script type="text/ecmascript-6">
  import {prefixStyle} from "common/js/dom";

  const progressBtnWidth = 16; //进度按钮的宽度
  const transform = prefixStyle('transform')
    export default {
      name: "progress-bar",
      props:{
        percent:{
          type:Number,
          default:0
        }
      },
      watch:{
        percent(newPercent){
          if (newPercent>=0 &&!this.touch.initiated){
            const barWidth = this.$refs.progressBar.clientWidth-progressBtnWidth // 进度条总长度
            const offsetWidth = newPercent * barWidth // 偏移的宽度等于 歌曲播放比例*总宽度

            this._offset(offsetWidth)
          }
        }
      },
      created(){
        this.touch={}
      },
      methods:{
        progressClick(e){
          const rect = this.$refs.progressBar.getBoundingClientRect()
          const offsetWidth = e.pageX-rect.left
          this._offset(offsetWidth)
          // 这里当我们点击 progressBtn 的时候, e.offsetX 获取不对
          //this._offset(e.offsetX)
         this._triggerPercent()

        },
        progressTouchStart(e){
          // 定义标识位
          this.touch.initiated=true
          this.touch.startX = e.touches[0].pageX
          this.touch.left = this.$refs.progress.clientWidth
        },
        progressTouchMove(e){
          console.log('move...');
          if (!this.touch.initiated) {
            return
          }
          const deltaX = e.touches[0].pageX-this.touch.startX // 计算拖动的偏移量
          const offsetWidth =Math.min(this.$refs.progressBar.clientWidth-progressBtnWidth,Math.max(0,this.touch.left+deltaX))
          this._offset(offsetWidth)

        },
        progressTouchEnd(){
          this.touch.initiated = false
          this._triggerPercent()
        },
        _triggerPercent(){
          const barWidth = this.$refs.progressBar.clientWidth-progressBtnWidth // 进度条总长度
          const percent = this.$refs.progress.clientWidth/barWidth
          this.$emit('percentChange',percent)
        },
        _offset(offsetWidth){
          this.$refs.progress.style.width= `${offsetWidth}px`
          this.$refs.progressBtn.style[transform] = `translate3d(${offsetWidth}px,0,0)`
        }


      }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"

  .progress-bar
    height: 30px
    .bar-inner
      position: relative
      top: 13px
      height: 4px
      background: rgba(0, 0, 0, 0.3)
      .progress
        position: absolute
        height: 100%
        background: $color-theme
      .progress-btn-wrapper
        position: absolute
        left: -8px
        top: -13px
        width: 30px
        height: 30px
        .progress-btn
          position: relative
          top: 7px
          left: 7px
          box-sizing: border-box
          width: 16px
          height: 16px
          border: 3px solid $color-text
          border-radius: 50%
          background: $color-theme
</style>
